<template>
  <div>
    <div class="detail">
      <div @click="PreviewImg" style="height: auto">
        <img :src="defaultImg" style="width: 100%;display: block">
      </div>

      <div class="ye">
        <div class="ye_tit">
          <div class="iconBox">
            <div class="icon_price"></div>
          </div>
          <div>
            健身价格
          </div>
        </div>
        <div class="ye_mid"></div>
        <div class="ye_content">
          <div>
            <!--￥50/小时(开通超猩卡，享9.5折优惠-->
<!--<a><span class="more" @click="OpenRecharge()"> 详情</span></a>)<br>￥30/小时(晨练 00:00 - 11:00 超猩卡优惠￥28.5/小时-->
            {{Detail.price}}
          </div>
        </div>
      </div>

      <div class="ye">
        <div class="ye_tit">
          <div class="iconBox">
            <div class="icon_introduce"></div>
          </div>
          <div>
            场地简介
          </div>
        </div>
        <div class="ye_mid"></div>
        <div class="ye_content">
          <!--超级猩猩SUPERMONKEY全能体能工作室，融合TRX、跳床、CROSSFIT、搏-->
          <!--击、杠铃、壶铃等多种功能性训练项目为一体，打造超猩特色课程，体-->
          <!--验多种训练项目同时，也让猩猩们能更高效有趣的完成训练。-->
          {{Detail.description}}
        </div>
      </div>

      <div class="ye">
        <div class="ye_tit">
          <div class="iconBox">
            <div class="icon_address"></div>
          </div>
          <div>
            地址
          </div>
        </div>
        <div class="ye_mid"></div>
        <div class="ye_content">
          <!--深圳市宝安中心区新安六路与宝源南路交界处众里创业社区首层-->
         <!--( 1st Floor, Joinin Hub Community, Intersection of Xin'an 6th Road and Baoyuan Southern Road, Bao'an District, Shenzhen )-->
          {{Detail.address}}
          <span class="more" @click="LoactionFunc()">
            查看地图
          </span>
        </div>
      </div>

      <div class="ye">
        <div class="ye_tit">
          <div class="iconBox">
            <div class="icon_careful"></div>
          </div>
          <div>
            注意事项
          </div>
        </div>
        <div class="ye_content">
          <div style="margin-bottom: 10px;" v-for="(item, index) in Detail.notes">
            <!--1.本店提供更衣室、储物柜、卫生间，不设淋浴。Changing room, lockers and lavatory available, no shower provided.-->
            {{`${(index+1)}.${item}`}}
          </div>
          <!--<div style="margin-bottom: 10px;">-->
            <!--2.课程开始前6小时后取消预约，不支持退款。Refunds are available for cancellations done at least 6 hours before class.-->
          <!--</div>-->
          <!--<div style="margin-bottom: 10px;">-->
            <!--3.室内设高速无线网络，WIFI Code：supermonkey-->
          <!--</div>-->
        </div>
      </div>

      <div class="ye">
        <div class="ye_tit">
          <div class="iconBox">
            <div class="icon_idea"></div>
          </div>
          <div>
            健身步骤
          </div>
        </div>
        <div class="ye_mid"></div>
        <div class="ye_content step">
          <img :src="stepsImg" style="height: 2.52rem; width: 2.4rem;">
        </div>
      </div>

    </div>
    <router-link to="/classList?footerShow=1">
      <div class="Next_button Store_Next_botton">
        约课
      </div>
    </router-link>
  </div>
</template>

<script>
  import {requestStoreDetail} from '@/api/api'
  export default {
    data () {
      return {
        Detail: {
          description: ''
        },
        stepsImg: require('@/assets/images/steps.png'),
        defaultImg: require('@/assets/images/swipe1.png')
      }
    },
    methods: {
      GetDetail () {
        const StoreId = JSON.parse(sessionStorage.getItem('store_id'))
        requestStoreDetail(StoreId).then((res) => {
          this.Detail = res.data.data
          this.defaultImg = this.Detail.images[0]
        })
      },
      PreviewImg () {
        const This = this
        window.wx.ready(() => {
          window.wx.previewImage({
            current: This.Detail.images[0], // 当前显示图片的http链接
            urls: This.Detail.images // 需要预览的图片http链接列表
          })
        })
      },
      LoactionFunc () {
        const This = this
        console.log(Number(This.Detail.latitude), Number(This.Detail.longitude))
        window.wx.ready(() => {
          window.wx.openLocation({
            latitude: Number(This.Detail.latitude), // 纬度，浮点数，范围为90 ~ -90
            longitude: Number(This.Detail.longitude), // 经度，浮点数，范围为180 ~ -180。
            name: This.Detail.name, // 位置名
            address: This.Detail.address // 地址详情说明
          })
        })
      },
      OpenRecharge () {
        this.$router.push({ name: 'Recharge' })
      }
    },
    mounted () {
      this.$nextTick(() => {
        this.GetDetail()
      })
    }
  }
</script>

<style scoped>
  .ye {
    margin: 0.14rem;
    background-color: #262626;
    border-radius: 0.05rem;
    overflow: hidden;
  }
  .iconBox {
    width: 0.35rem;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .ye_tit {
    height: 0.38rem;
    background-color: #1c1c1c;
    display: -ms-flexbox;
    display: flex;
    display: -webkit-flex;
    font-size: 0.17rem;
    color: #fff;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
  }
  .ye_content {
    padding: 0.14rem;
    color: #bfbbbb;
    font-size: 0.13rem;
    font-weight: lighter;
    line-height: 0.2rem;
  }

  .ye_mid {
    height: 1px;
    background-color: #2e2e2c;
    display: block;
    content: "";
    margin-left: 1px;
    margin-right: 1px;
  }

  .step {
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
  }

  .detail {
    padding-bottom: 0.49rem;
    background: #333;
  }
</style>

